import React from 'react'
import './index.css'

export default function Footer({selectAll, list}) {

	// 受控组件可以直接拿到自身的值，直接调用父组件的selectAll方法

	return (
		<div className='footer'>
			<div>
				<input type="checkbox" checked={list.length !==0 && list.length === (list.filter(item => item.done)).length }  onChange={(e) => {selectAll(e.target.checked)}} />
				<span>全选</span>
			</div>
			<div>
				<span>总共有{list.length}件待办事项</span>
			</div>
		</div>
	)
}
